<template>
  <Modal v-model="modalVisible" title="配置集详情" @on-cancel="modalManiCancel" width="1000">
    <div class="modal-card">
      <h4 class="zl-title">配置集详情</h4>
      <div class="modal-item">
        <Row :gutter="10">
          <Col :span="12">名称：{{modalForm.id}}</Col>
          <Col :span="12">环境：{{modalForm.environmentId}}</Col>
          <Col :span="24">创建时间：{{modalForm.createTime}}</Col>
        </Row>
      </div>
      <h4 class="zl-title">文件列表</h4>
      <Table :columns="columns" :data="fileList"></Table>

    </div>
    <div slot="footer">
      <Button type="primary" @click="modalManiConf">确定</Button>
    </div>
  </Modal>
</template>
<script type="text/javascript">
// import Fetch from '@/api/request'
export default {
  data() {
    return {
      modalForm: {
      },
      modalVisible: false,
      columns: [
        {
          type: 'index',
          width: 60
        }, {
          title: '文件名',
          key: 'name',
          width: 200
        }, {
          title: '文件内容',
          render: (h, params) => {
            return h('div', {
              class: 'config-content'
            }, params.row.content)
          }
        }
      ],
      fileList: []
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  mounted() {
  },
  methods: {
    // 确定操作
    modalManiConf() {
      this.$emit('update:visible', false)
    },
    // 取消操作
    modalManiCancel() {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
      if (val) {
        this.modalForm = Object.assign({}, this.form)
        if (this.form.data) {
          this.isEdit = true
          let t = []
          for (const key in this.form.data) {
            if (this.form.data.hasOwnProperty(key)) {
              const item = this.form.data[key]
              t.push({
                name: key,
                content: item
              })
            }
          }
          this.fileList = t
        } else {
          this.fileList = []
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.modal-card {
  padding: 10px 20px;
  font-size: 14px;
  .zl-title {
    margin-top: 10px;
  }
  .modal-item {
    padding-left: 15px;
  }
  .ivu-col {
    padding-bottom: 8px;
    padding-top: 6px;
  }
}
</style>
